<script>
import * as deptApi from "@/api/departmentManage/departmentManage";
import {downloadXls} from "@/util/util";
import {getToken} from "@/util/auth";

export default {
  name: "departmentManageFileTemp",
  data() {
    return {
      headers: {
        "Application-Id": localStorage.getItem("appId"),
        "Authorization": 'bearer ' + getToken()
      },
      errorList: [],
      fileKey:"fileKey"
    }
  },
  methods: {
    new() {
    },
    onSuccess(response) {
      this.errorList = response.data;
      if (!this.errorList||this.errorList.length===0){
        this.$message.success("上传成功")
      }

      this.$nextTick(()=>{
        this.fileKey = this.getOnlyId();
      })
    },
    downloadExcel() {
      deptApi.importTemplate().then(res => {
        downloadXls(res.data, "部门模板.xlsx")
      })
    }
  }
}
</script>

<template>
  <div style="width: 100%;height: 100%"  :key="fileKey">
    <el-button size="small" type="primary" @click="downloadExcel">下载模板</el-button>
    <p></p>
    <el-upload
        class="upload-demo"
        drag
        accept=".xls,.xlsx"
        :headers="headers"
        limit="1"
        :on-success="onSuccess"
        action="/api/user-api/mx-org/import">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
    </el-upload>
    <p></p>
    <el-table size="mini" border v-if="errorList&&errorList.length>0" :data="errorList">
      <el-table-column label="行号" prop="rowNum"></el-table-column>
      <el-table-column label="错误信息" prop="msg"></el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">

</style>
